<template>
	<view class="login">
		<u-text text="欢迎使用同城配送系统" size="24" bold></u-text>
		<u-text text="请输入您的手机号登录" size="18" type="info"></u-text>
		<u-form ref="formRef" :model="form" label-position="top">
			<u-form-item prop="username">
				<u-input v-model="form.username" shape="circle" placeholder="请输入用户名">
					<!-- 					<template #suffix>
						<u-code ref="uCodeRef" :seconds="seconds" @end="codeEnd" @start="codeStart" @change="codeChange"></u-code>
						<u-text
							:type="isCodeing ? 'info' : 'primary'"
							:text="isCodeing ? tips : '获取验证码'"
							@tap="getCode"
						></u-text>
					</template> -->
				</u-input>
			</u-form-item>
			<u-form-item prop="password">
				<u-input v-model="form.password" shape="circle" placeholder="请输入密码" type="password"></u-input>
			</u-form-item>
			<view class="flex">
				<u-checkbox-group v-model="checkedList">
					<u-checkbox label="我已接受并同意" value="checked" shape="circle"></u-checkbox>
				</u-checkbox-group>
				<u-text text="《合作协议》" type="primary"></u-text>
			</view>
			<u-form-item>
				<u-button type="primary" shape="circle" @tap="handleLogin">登录</u-button>
			</u-form-item>
		</u-form>
	</view>
</template>

<script setup>
	import { onReady, onShow } from "@dcloudio/uni-app";
	import { ref, reactive, computed } from "vue";
	import { useUserStore } from "@/store/user";

	const userStore = useUserStore();

	const formRef = ref();

	const uCodeRef = ref();

	const checkedList = ref([]);

	const form = reactive({
		username: "admin",
		password: "0",
		db: "odoo_store",
	});

	// 是否勾选隐私政策
	const isChecked = computed(() => {
		return checkedList.value.length > 0;
	});

	const rules = {
		phone: [
			{ required: true, message: "请输入手机号", trigger: ["blur"] },
			{
				pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
				message: "手机号格式不正确",
				trigger: ["blur"],
			},
		],
		code: [
			{ required: true, message: "请输入验证码", trigger: ["blur"] },
			{ pattern: /^\d{6}$/, message: "手机号格式不正确", trigger: ["blur"] },
		],
	};

	// 获取验证码倒计时时长
	const seconds = ref(60);

	// 提示
	const tips = ref("");

	// 是否在60s内发送过短信
	const isCodeing = ref(false);

	// 获取验证码
	function getCode() {
		formRef.value.validateField("phone", (errors) => {
			if (errors.length == 0) {
				console.log("d");
				if (uCodeRef.value.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: "正在获取验证码",
					});
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被start()方法中的提示覆盖
						uni.$u.toast("验证码已发送");
						// 通知验证码组件内部开始倒计时
						uCodeRef.value.start();
					}, 2000);
				} else {
					uni.$u.toast("倒计时结束后再发送");
				}
			}
		});
	}

	// 发送后时间变化
	function codeChange(e) {
		tips.value = e;
	}

	// 短信已发送
	function codeStart() {
		isCodeing.value = true;
	}

	// 发送后倒计时已结束
	function codeEnd() {
		isCodeing.value = false;
	}

	// 登录处理
	async function handleLogin() {
		console.log(isChecked.value);
		if (isChecked.value) {
			const valid = await formRef.value.validate();
			if (valid) {
				const result = await userStore.fetchLogin(form);
			}
		} else {
			uni.$u.toast("请勾选并同意隐私政策");
		}
	}

	onReady(() => {
		// 防止微信小程序表单校验失败
		formRef.value.setRules(rules);
	});

	onShow(() => {
		isCodeing.value = false;
	});
</script>

<style lang="scss" scoped>
	.login {
		padding: 300rpx 40rpx 0;
	}
</style>
